<template>
    <div class="value-drop-component">
        <el-dialog
            title="数值下拉过滤组件"
            :visible.sync="dialogOpen"
            @close="close"
        >
            <div class="filter-content">
                <el-form>
                    <el-container>
                        <el-aside class="areaDiv" style="width: 200px">
                            <com-part ref="comPart"
                                      @SelectionChange="showSelect" @SelectionPanel="getSelectPanel"
                                      :boardId="boardId" :status="status"
                                      :table-id="tableId"
                                      :selected-data="selectedColData"
                                      :selected-unit="selectedUnit"  type-id="3"></com-part>
                        </el-aside>
                        <el-container>
                            <el-main>
                                <div class="common-border">
                                    <div style="display: flex;flex-direction: row;">
                                        <div class="font1">字段</div>
                                        <div style="height: 70px;margin-left: 30px">
                                            <el-scrollbar>
                                                <div style="height: 40px;display: flex;flex-direction: row;flex-wrap: wrap">
                                                    <div style="margin: 5px;"
                                                         v-for="tag in colNameIn"
                                                         :key="tag.columnName"
                                                         :type="tag.type">
                                                        {{tag.comment||tag.columnName}}
                                                    </div>
                                                </div>
                                            </el-scrollbar>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-top: 20px">
                                    <el-radio-group size="mini" v-model="isCollapse" @change="handleChange">
                                        <el-radio-button label="1">多选</el-radio-button>
                                        <el-radio-button label="2">单选</el-radio-button>
                                    </el-radio-group>
                                    <div v-if="isCollapse === '1'">
                                        <p>过滤条件</p>
                                        <num-multiple-component :table-id="tableId"  @selectValue="getSelectValue"  ref="mulSelect"></num-multiple-component>
                                    </div>
                                    <div v-else>
                                        <p>过滤条件</p>
                                        <num-radio-component :table-id="tableId"  @selectValue="getSelectValue"  ref="radSelect"></num-radio-component>
                                    </div>

                                    <!--                                    <el-tabs type="card" v-model="activeName"   @tab-click="handleClick" style=" width: 222px">-->
                                    <!--                                        <el-tab-pane label="多选" name="first" style="width: 340px">-->
                                    <!--                                            <div>-->
                                    <!--                                                <p>过滤条件</p>-->
                                    <!--                                                <multiple-component :table-id="tableId"  @selectValue="getSelectValue"  ref="mulSelect"></multiple-component>-->
                                    <!--                                            </div>-->
                                    <!--                                        </el-tab-pane>-->
                                    <!--                                        <el-tab-pane label="单选" name="second" style="width: 340px">-->
                                    <!--                                            <div>-->
                                    <!--                                                <p>过滤条件</p>-->
                                    <!--                                                <radio-component :table-id="tableId"  @selectValue="getSelectValue"  ref="radSelect"></radio-component>-->
                                    <!--                                            </div>-->
                                    <!--                                        </el-tab-pane>-->
                                    <!--                                    </el-tabs>-->
                                    <!-- <drop-component @getSelect="getSelectValue" style="overflow: hidden" :table-id="panel.tableId" :selected-value="selectedValue" ref="drop"></drop-component>-->
                                </div>
                            </el-main>
                        </el-container>
                    </el-container>
                </el-form>
            </div>
            <div class="footer1">
                <el-button @click="close" size="mini">取消</el-button>
                <el-button @click="confirm" size="mini">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>确认修改信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="ConfirmModification">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import ajax from '@api/ajax'
import {
GET_FILTER_INFO,
SAVE_FILTER_INFO
} from '@api/url'
import DropComponent from '../../../../components/fliterComponent/DropComponent.vue'
import NumMultipleComponent from '../../../../components/fliterComponent/NumMultipleComponent'
import NumRadioComponent from '../../../../components/fliterComponent/NumRadioComponent'
import comPart from './CommonPartComponent'

    export default {
        components: {
            DropComponent,
            comPart,
            NumMultipleComponent,
            NumRadioComponent
        },
        data () {
            return {
                isCollapse: '1',
                form: {},
                dialogOpen: false,
                colNameIn: [],
                panel: {},
                selectValue: {},
                tableId: '',
                selectedColData: [],
                selectedValue: [],
                dialogVisible: false,
                unitId: '',
                selectedUnit: [],
                status: 'add',
                boardId: '',
                activeName: 'first'
            }
        },
        watch: {
            'colNameIn': 'currCol'
        },
        methods: {
            // 编辑组件调用的方法
            editPanel (data) {
                this.status = data.status
                this.unitId = data.unitId
                this.boardId = data.boardId
                let obj = {}
                ajax.post(GET_FILTER_INFO, {unitId: this.unitId}).then(res => {
                    obj = res.data
                    if (Object.keys(obj).length !== 0) {
                        this.openView(obj)
                        if (obj.unitName === 'NumRadioComponent') {
                            this.isCollapse = '2'
                        }
                        if (obj.unitName === 'NumMultipleComponent') {
                            this.isCollapse = '1'
                        }
                    }
                }).catch(err => {
                    console.error('查询错误！', err)
                })
            },
            // 其他页面调用时获取数据
            openView (data) {
                if (this.status === 'add') {
                    this.boardId = data
                }
                this.dialogOpen = true
                if (this.status === 'edit') {
                    let tempArray = []
                    this.form = JSON.parse(data.value)
                    this.tableId = this.form.tableId
                    this.selectedColData = this.form.column
                    this.selectedValue = this.form.value
                    tempArray.push(this.form.tableId)
                    this.selectedUnit = tempArray
                }
                this.$nextTick(() => {
                    this.$refs.comPart.init()
                })
            },
            // 展示选中的组件
            showSelect (row) {
                if (row.length !== 0) {
                    this.colNameIn = row
                    let fieldValue = []
                    row.forEach(e => {
                        fieldValue.push(e.columnName)
                    })
                    let data = {}
                    if (this.status === 'add') {
                        data.tableId = this.panel.tableId
                    }
                    if (this.status === 'edit') {
                        data.tableId = this.tableId
                    }
                    data.field = fieldValue
                    data.next = false
                    debugger
                    if (this.isCollapse === '1') {
                        if (this.selectedValue.length !== 0) {
                            data.selectedValue = this.selectedValue
                        }
                        this.$refs.mulSelect.getData(data)
                    }
                    if (this.isCollapse === '2') {
                        if (this.selectedValue.length !== 0) {
                            data.selectedValue = this.selectedValue.toString()
                        }
                        this.$refs.radSelect.getData(data)
                    }
                } else {
                    this.colNameIn = []
                }
            },
            // 获取选中的组件
            getSelectPanel (data) {
                this.panel = data
            },
            // 将选中的字段数据传出
            handleClick (tab, event) {
                let fieldValue = []
                this.colNameIn.forEach(e => {
                    fieldValue.push(e.columnName)
                })
                let data = {}
                if (this.status === 'add') {
                    data.tableId = this.panel.tableId
                }
                if (this.status === 'edit') {
                    data.tableId = this.tableId
                }
                data.field = fieldValue
                data.next = false
                if (tab.name === 'first') {
                    this.$refs.mulSelect.getData(data)
                }
                if (tab.name === 'second') {
                    this.$refs.radSelect.getData(data)
                }
            },
            // 获取选中的值
            getSelectValue (data) {
                // 下拉选中的值
                this.selectValue = data
                /* // 多选或者单选的tab
                 this.tabValue=data.tab */
                console.log('')
            },
            // 确认按钮调用的方法
            confirm () {
                if (this.status === 'add') {
                    if (JSON.stringify(this.panel) === '{}') {
                        this.$message.warning('请选择组件')
                        return
                    }
                    if (this.colNameIn.length === 0) {
                        this.$message.warning('请选择字段')
                        return
                    }
                    let conditions = {}
                    let column = {}
                    column['column'] = []
                    this.colNameIn.forEach(e => {
                        column['column'].push(e.columnName)
                    })
                    column['value'] = []
                    column['tableId'] = this.panel.tableId

                    conditions['optMode'] = 'A'
                    conditions['unitType'] = '4'
                    conditions['length'] = '200'
                    conditions['width'] = '400'
                    conditions['haxis'] = '200'
                    conditions['vaxis'] = '200'
                    /*   // 暂时写死
                       conditions['modelId']='123' */
                    conditions['modelId'] = this.panel.modelId
                    if (this.isCollapse === '1') {
                        column['value'] = this.selectValue
                        conditions['value'] = column
                        conditions['unitCom'] = 'NumMultipleComponent'
                        conditions['unitName'] = 'NumMultipleComponent'
                        // 多选
                        column['type'] = '1'
                    }
                    if (this.isCollapse === '2') {
                        column['value'].push(this.selectValue)
                        conditions['value'] = column
                        conditions['unitCom'] = 'NumRadioComponent'
                        conditions['unitName'] = 'NumRadioComponent'
                        // 单选
                        column['type'] = '0'
                    }
                    conditions['ctlUnit'] = this.panel.unitId
                    conditions['seqNO'] = '1'
                    conditions['boardId'] = this.boardId
                    ajax.post(SAVE_FILTER_INFO, conditions).then(res => {
                        this.$message.success('保存成功')
                        this.dialogVisible = false
                        this.dialogOpen = false
                        this.$emit('getFilterFlag',{unitId:this.unitId})
                        this.close()
                    }).catch(err => {
                        console.error('加载出错！', err)
                    }).finally(() => {

                    })
                }
                if (this.status === 'edit') {
                    this.dialogVisible = true
                }
            },
            // 编辑状态下的点击确认按钮调用的方法
            ConfirmModification () {
                if (JSON.stringify(this.panel) === '{}') {
                    this.$message.warning('请选择组件')
                    this.dialogVisible = false
                    return
                }
                if (this.colNameIn.length === 0) {
                    this.$message.warning('请选择字段')
                    this.dialogVisible = false
                    return
                }
                let conditions = {}
                let column = {}
                column['column'] = []
                this.colNameIn.forEach(e => {
                    column['column'].push(e.columnName)
                })
                column['value'] = []
                column['tableId'] = this.panel.tableId

                conditions['optMode'] = 'U'
                if (this.isCollapse === '1') {
                    column['value'] = this.selectValue
                    conditions['value'] = column
                    conditions['unitCom'] = 'NumMultipleComponent'
                    conditions['unitName'] = 'NumMultipleComponent'
                    // 多选
                    column['type'] = '1'
                }
                if (this.isCollapse === '2') {
                    column['value'].push(this.selectValue)
                    conditions['value'] = column
                    conditions['unitCom'] = 'NumRadioComponent'
                    conditions['unitName'] = 'NumRadioComponent'
                    // 单选
                    column['type'] = '0'
                }
                conditions['unitId'] = this.unitId
                conditions['boardId'] = this.boardId

                ajax.post(SAVE_FILTER_INFO, conditions).then(res => {
                    this.$message.success('保存成功')
                    this.dialogOpen = false
                    this.$emit('getFilterFlag')
                    this.close()
                }).catch(err => {
                    console.error('加载出错！', err)
                }).finally(() => {
                })
            },
            // 页面关闭时数据重置
            close () {
                this.dialogOpen = false
                this.dialogVisible = false
                Object.assign(this.$data, this.$options.data())
                this.$refs.comPart.close()
                this.$refs.mulSelect.close()
                this.$refs.radSelect.close()
            },
            // colNameIn 变化时调用的方法
            currCol () {
                if (this.colNameIn.length === 0) {
                    this.$refs.mulSelect.close()
                    this.$refs.radSelect.close()
                }
            },
            handleChange (tab) {
                debugger
                let fieldValue = []
                this.colNameIn.forEach(e => {
                    fieldValue.push(e.columnName)
                })
                let data = {}
                if (this.status === 'add') {
                    data.tableId = this.panel.tableId
                }
                if (this.status === 'edit') {
                    data.tableId = this.tableId
                }
                data.field = fieldValue
                data.next = false
                if (tab === '1') {
                    this.$refs.mulSelect.getData(data)
                }
                if (tab === '2') {
                    this.$refs.radSelect.getData(data)
                }
            }

        },
        mounted () {

        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .value-drop-component
        .filter-content
            margin 0 auto
            width 90%
            height 80%
            border 1px solid #D8DCE5
            .common-border
                border: 1px solid #D8DCE5
            .el-aside
                border-right 1px solid #D8DCE5
            .el-main
                margin-left 2px
                margin-top 2px
                .font1
                    border-right 1px solid #D8DCE5
                    line-height 100px
                    width 40px
        .footer1
            text-align right
            padding-right 45px
            padding-top 20px
        .el-tabs__item
            width 110px
            text-align center
    </style>
